<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    	<h1 class="page-header">记录管理/
    		<span class="text-muted">Record management</span>
    		<button class="layui-btn layui-btn-primary layui-btn-xs" id="refresh">
		  		<i class="layui-icon layui-icon-refresh-3"></i>刷新
		  	</button>
    	</h1>
    	<div class="layui-form" id="search">
		 	<div class="layui-inline">
      			记录ID：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="rid"  id="rid" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>
    		<div class="layui-inline">
      			学号：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="sid"  id="sid" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>
		 	<div class="layui-inline">
      			姓名：
      			<div class="layui-input-inline" style="width:100px;">
        			<input name="sname"  id="sname" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>	

		 	
		 	<div class="layui-inline">
      			课程ID：
      			<div class="layui-input-inline" style="width:100px;">
        			<input name="cid"  id="cid" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>
    		
			<div class="layui-inline">
      			记录时间：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="createdate"  id="createdate" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>
    		
		 	<div class="layui-inline">
      			状态：
      			<div class="layui-input-inline" style="width:80px;">
        			<select name="flag" id="flag" lay-verify="" lay-search="">
				         <option value="">选择</option>
				         <option value="1">已到</option>
				         <option value="2">迟到</option>
				         <option value="3">早退</option>
				    </select>
      			</div>
    		</div>
    		
		 	<div class="layui-inline">
			  	<button class="layui-btn" data-type="reload" id="reload">搜索</button>
		  	</div>
		  	
		</div>
    	
    	<table id="Record" lay-filter="test"></table>
    </div>
    
    
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
	<script>
		var submit;
		layui.use(['table', 'layer', 'laytpl', 'form'], function(){
		  var table = layui.table;
		  var layer = layui.layer;
		  var laytpl = layui.laytpl;
		  var form = layui.form;
		  
		  //第一个实例
		  var tableIns = table.render({
		    elem: '#Record'
		    ,height: 471
		    ,method: 'post'
		    ,url: 'record/findRecordByPage.action' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'rid', title: '记录ID', sort: true, width:130}
		      ,{field: 'cname', title: '课程名', sort: true, minWidth:130}
		      ,{field: 'cidSublevel', title: '排课ID', sort: true, minWidth:80}
		      ,{field: 'sid', title: '学号', sort: true, width:130}
		      ,{field: 'sname', title: '姓名', width:90, sort: true}
		      ,{field: 'flaginfo', title: '状态', sort: true, width:70}
		      ,{field: 'createdateStr', title: '记录时间', sort: true, minWidth:180}
		      ,{fixed: 'right', title: '数据操作', width: 180, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		  
		  $('#refresh').on('click', function(){
			$(".layui-laypage-btn").click()
			layer.msg('刷新完了');
		  });
		  
		  var rrid = $('#rid');
		  var rsid = $('#sid');
		  var rsname = $('#sname');
		  var rcid = $('#cid');
		  var rflag = $('#flag');
		  var rcreatedate = $('#createdate');
		  
		  $('#reload').on('click', function(){
		  	// 条件查询
 		  	tableIns.reload({
			  where: { //设定异步数据接口的额外参数，任意设
			    rid: rrid.val()
			    ,sid: rsid.val()
			    ,sname: rsname.val()
			    ,cid: rcid.val()
			    ,flag: rflag.val()
			    ,createdate: rcreatedate.val()
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			}); 
		  });
		  
		  
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			 
			  if(layEvent === 'flag1'){ //标记已到
				$.ajax(
				{
					type:"post",
					url:"record/update.action",
					dataType:"json",
					data:{
						rid: data.rid
						,flag: 1
					},success:function(result){
						$(".layui-laypage-btn").click()
						layer.msg(result.msg);
					}
				});
			  } else if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			      layer.close(index);
			      //向服务端发送删除指令
			      $.ajax(
					{
						type:"post",
						url:"record/deleteRecordById.action",
						dataType:"json",
						data:{
							rid: data.rid
						},success:function(result){
							$(".layui-laypage-btn").click()
							layer.msg(result.msg);
						}
					});
			    });
			  } else if(layEvent === 'flag2'){ //标记迟到
				$.ajax(
				{
					type:"post",
					url:"record/update.action",
					dataType:"json",
					data:{
						rid: data.rid
						,flag: 2
					},success:function(result){
						$(".layui-laypage-btn").click()
						layer.msg(result.msg);
					}
				});
			  }
			});
		  
		});
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="flag1">已到</a>
 		<a class="layui-btn layui-btn-xs" lay-event="flag2">迟到</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
  </body>
</html>
